<template>
  <div>
    <el-form :model="formData" ref="formData" :rules="formRules" label-position="top" class="form-data">

      <el-form-item label="园区" prop="gardenId">
        <el-select v-model="formData.gardenId" filterable placeholder="请选择" style="width: 100%" @change="getHousingList"
                   :disabled="!(!formData.id)">
          <el-option :label="item.gardenName" :value="item.id" v-for="(item, index) in gardenList" :key="index"/>
        </el-select>
      </el-form-item>

      <el-form-item label="房源" prop="assessId">
        <el-select v-model="formData.assessId" filterable placeholder="请选择" style="width: 100%"
                   :disabled="!(!formData.id)">
          <el-option :label="item.housingName" :value="item.id" v-for="(item, index) in housingList" :key="index"/>
        </el-select>
      </el-form-item>

      <el-form-item label="企业" prop="enterpriseId">
        <el-select v-model="formData.enterpriseId" filterable placeholder="请选择" style="width: 100%"
                   :disabled="!(!formData.id)">
          <el-option :label="item.name" :value="item.id" v-for="(item, index) in enterpriseList"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="带看经纪人名称" prop="agentId">
        <el-select v-model="formData.agentId" filterable placeholder="请选择" style="width: 100%"
                   :disabled="!(!formData.id)">
          <el-option :label="item.name" :value="item.id" v-for="(item, index) in agentList" :key="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="签约金额" prop="money">
        <el-input type="number" v-model="formData.money" placeholder="请输入签约金额" :disabled="!(!formData.id)"/>
      </el-form-item>

      <el-form-item label="账号密码" prop="password" v-if="!formData.id">
        <el-input v-model="formData.password" type="password" placeholder="请输入账号密码"/>
      </el-form-item>

      <el-form-item label="合同PDF" prop="contractPdf">
        <el-table :data="pdfFile" style="width: 100%" v-if="formData.contractPdf">
          <el-table-column prop="fileName" label="文件名称" align="center" show-overflow-tooltip/>
          <el-table-column prop="address" label="操作" align="center" v-if="!formData.id">
            <template slot-scope="{row}">
              <el-button type="text" @click="formData.contractPdf = null, pdfFile = []">删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <UploadFile fileType=".pdf" v-model="formData.contractPdf" @change="fileListChange" v-else/>
        <el-input v-model="formData.contractPdf" class="upload-value"/>
      </el-form-item>

      <el-form-item class="form-button" v-if="!formData.id">
        <el-button class="but-view" @click="drawerClose">取 消</el-button>
        <el-button class="but-view" type="primary" @click="onSubmit">提 交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'ContractForm',
    props: {
      entity: Object,
      status: String
    },
    data() {
      return {
        gardenList: [],
        enterpriseList: [],
        housingList: [],
        agentList: [],
        formData: {
          agentId: null, // 带看经纪人id
          assessId: null, // 房产id
          contractPdf: null, // 合同PDF
          enterpriseId: null, // 企业id
          gardenId: null, // 园区id
          money: null, // 签约金额
          password: null // 账号密码
        },
        formRules: {
          agentId: [
            { required: true, message: '请选择带看经纪人', trigger: 'change' }
          ],
          assessId: [
            { required: true, message: '请选择房产', trigger: 'change' }
          ],
          contractPdf: [
            { required: true, message: '上传合同PDF', trigger: 'change' }
          ],
          enterpriseId: [
            { required: true, message: '请选择企业', trigger: 'change' }
          ],
          gardenId: [
            { required: true, message: '请选择园区', trigger: 'change' }
          ],
          money: [
            { required: true, message: '请输入签约金额', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入账号密码', trigger: 'blur' }
          ]
        },
        pdfFile: []
      }
    },
    beforeMount() {
      this.getGardenList()
      this.getHousingList()
      this.getEnterpriseList()
      this.getAgentList()
      if (this.entity) this.getDetails()
    },
    methods: {
      /**
       * 上传文件变化事件
       */
      async fileListChange(event) {
        this.pdfFile = [event]
      },
      drawerClose() {
        this.$emit('close')
      },
      async onSubmit() {
        this.$refs.formData.validate(async(valid) => {
          if (!valid) return this.$message.warning('请完善信息')
          await this.$ajax.post('/wx/contract/backstage/add', this.formData)
          this.$message.success('操作成功!')
          this.$emit('refresh')
          this.drawerClose()
        })
      },
      /**
       * 获取详情
       */
      async getDetails() {
        const res = await this.$ajax.get(`/wx/contract/info?id=${this.entity.id || ''}`)
        this.pdfFile = [{ fileName: res.data.contractPdf }]
        const arr = ['gardenId', 'enterpriseId', 'agentId', 'assessId']
        arr.forEach(item => res.data[item] = res.data[item] + '')
        this.formData = res.data
      },
      /**
       * 园区列表
       */
      async getGardenList() {
        const res = await this.$ajax.get('/garden/backstage/list')
        this.gardenList = res.rows
      },
      /**
       * 房产列表
       */
      async getHousingList() {
        const res = await this.$ajax.get(`/my/house/assess/garden/list?gardenId=${this.formData.gardenId || ''}`)
        this.housingList = res.rows.map(item => {
          if (item.roomNumber) item.roomNumber = item.roomNumber.split(',').join('-')
          return item
        })
      },
      /**
       * 企业列表
       */
      async getEnterpriseList() {
        const res = await this.$ajax.get('/enterprise/enterpriseNameList')
        this.enterpriseList = res.rows
      },
      /**
       * 经纪人列表
       */
      async getAgentList() {
        const res = await this.$ajax.get('/my/house/agent/backstage/list')
        this.agentList = res.rows
      }
    }
  }
</script>

<style scoped>
  .upload-value {
    position: absolute;
    z-index: -199;
    opacity: 0;
  }
</style>
